<template>
    <view>
        <!-- pages/auth/upload_img.wxml -->
        <view class="text-orange text-sm text-center margin-tb">门店环境照（至少1张，最多8张）</view>
        <view class="moudle radius bg-white margin-lr-lg padding-bottom-sm bg-white padding-left-sm flexs align-center flex-wrap">
            <view class="img_box margin-top-sm" @tap="afterRead" :data-index="index" v-for="(item, index) in upload3" :key="index">
                <image class="img radius" :src="item"></image>

                <view class="icon bg-red radiues text-white flexs align-center justify-center" @tap.stop.prevent="remove" :data-index="index">-</view>
            </view>
            <view class="img_box margin-top-sm" @tap="afterRead" data-index="-1" v-if="upload3.length < 8">
                <image class="img radius" src="/static/images/upload.png"></image>
            </view>
        </view>
    </view>
</template>

<script>
// pages/auth/upload_img.js
const app = getApp();

const _request = require('../../utils/request.js');

require;
export default {
    data() {
        return {
            upload3: []
        };
    },
    onLoad: function (options) {
        if (options.img) {
            this.setData({
                upload3: JSON.parse(options.img)
            });
        }
    },
    onUnload: function () {
        var that = this;
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        prevPage.setData({
            upload3: that.upload3
        });
    },
    methods: {
        remove(e) {
            var list = this.upload3;
            list.splice(e.currentTarget.dataset.index, 1);
            this.setData({
                upload3: list
            });
        },

        afterRead(e) {
            var index = e.currentTarget.dataset.index;
            let that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],

                success(res) {
                    if (index < 0) {
                        var list = [];
                        list = that.upload3.concat(res.tempFilePaths);
                    } else {
                        var list = that.upload3;
                        list.splice(index, 1, res.tempFilePaths[0]);
                    }

                    that.setData({
                        upload3: list
                    });
                    var tempFilePaths = res.tempFilePaths[0];
                    var self = that;
                    uni.uploadFile({
                        url: app.globalData.baseurl + '/store-api/file/batchUpload',
                        filePath: tempFilePaths,
                        name: 'files',
                        header: {
                            token: uni.getStorageSync('token')
                        },
                        formData: {
                            files: 'file'
                        },

                        success(res) {
                            var data = JSON.parse(res.data);

                            if (data.code == 200) {
                                let arr = self.data.upload3;

                                if (index < 0) {
                                    arr.splice(self.data.upload3.length - 1, 1, data.data[0]);
                                } else {
                                    arr.splice(index, 1, data.data[0]);
                                }

                                self.setData({
                                    upload3: arr
                                });
                            } else {
                                uni.showToast({
                                    title: '上传失败',
                                    icon: 'none'
                                });
                                let arr = self.data.upload3;

                                if (index < 0) {
                                    arr.splice(self.data.upload3.length - 1, 1);
                                } else {
                                    arr.splice(index, 1);
                                }

                                self.setData({
                                    upload3: arr
                                });
                            }
                        },

                        fail(error) {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'none'
                            });
                            let arr = self.data.upload3;

                            if (index < 0) {
                                arr.splice(self.data.upload3.length - 1, 1);
                            } else {
                                arr.splice(index, 1);
                            }

                            self.setData({
                                upload3: arr
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
/* pages/auth/upload_img.wxss */
page {
    background: #f5f5f5;
}
.moudle {
    width: 670rpx;
}
.img_box {
    width: 149rpx;
    height: 149rpx;
    position: relative;
    margin-right: 19rpx;
}
.img {
    width: 149rpx;
    height: 149rpx;
}
.icon {
    position: absolute;
    top: -5rpx;
    right: -5rpx;
    width: 20rpx;
    height: 20rpx;
    font-size: 12rpx;
}
</style>
